<template>
	<view class="fabu">
		<view class="feedback-title">
			援助内容
		</view>
		<view class="feedback-content">
			<textarea class="feedback-textarea" v-model="content" placeholder="请输入您的援助内容" />
		</view>
		<view class="feedback-title">
			添加图片:
		</view>
		<view class="feedback-image-box">

			<view class="feedback-image-item" v-for="(item, index) in imageList" :key="index">
				<view class="close-icon" @click="del(index)">
					<uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
				</view>
				<view class="image-box">
					<image :src="item.url" mode="aspectFill"></image>
				</view>
			</view>

			<view v-if="imageList.length < 6" class="feedback-image-item" @click="addImage">
				<view class="image-box">
					<uni-icons type="plusempty" size="50" color="#eee"></uni-icons>
				</view>
			</view>
			
			<view class="feedback-image-item" @click="addImageTest">
				<view class="image-box">
					<uni-icons type="plusempty" size="50" color="#eee"></uni-icons>
				</view>
			</view>

		</view>

		<button class="feedback-button" type="primary" @click="submit">帮助大家</button>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				hashList: [],
				imageList: [],
				content: ''
			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		watch: {
			// 检测userinfo的变化
			userinfo(newVal) {
				//userinfo 变好了
				console.log('watch userinfo变化了')
			}
		},
		onShow() {
			console.log(this.userinfo)
			//未登录检测,跳转到登录页面
			if (!this.userinfo) {
				uni.showModal({
					content: '请先微信登录',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
                  url: '/pages/login/login?reffer=' + window.location.href
							})
						} else if (res.cancel) {
							uni.switchTab({
								url: '/pages/tabbar/index/index'
							})
						}
					}
				});

				return
			}
		},
		methods: {
			// 上传
			submit() {
				
				if(!this.content){
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					})
					return 
				}
				
				this.$api.addarc({
					content: this.content,
					images: this.hashList,
					userid: this.userinfo.id,
					type: 2, //1求助 2援助
				}).then(res => {
					console.log(res)
					if (res.ret == 1) {
						uni.$emit('submitChange')
						uni.showToast({
							title: '添加成功，稍后显示',
							icon: 'none',
							success() {
								setTimeout(function() {
									uni.switchTab({
										url: '/pages/tabbar/index/index'
									});
								}, 1000)

							}
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},

			// 删除图片
			del(index) {
				this.imageList.splice(index, 1)
			},
			// 添加图片
			addImage() {
				let _this = this
				const count = 6 - this.imageList.length

				this.$api.get_token_from_qiniu({}).then(result => {
					

					
					if (result.ret == 1) {
						var token = result.data.token;

						uni.chooseImage({
							count: count, //最多运行上传几张图片
							success(res) {

								uni.showLoading({
									title: '上传中'
								})

								const {
									tempFilePaths
								} = res
								tempFilePaths.forEach((item, index) => {
									// 处理 h5 多选的状况
									if (index < count) {
										// _this.imageList.push({
										// 	url: item
										// })
									}

									uni.uploadFile({
										url: 'https://up-z1.qiniup.com/',
										filePath: item,
										name: 'file',
										formData: {
											'token': token
										},
										success: (uploadFileRes) => {
											let json = JSON.parse(uploadFileRes.data);
											// 上传到服务器fa_file中
											_this.$api.upload_qiniu({
												'hash': json.hash
											});

											_this.imageList.push({
												url: 'http://static.dadi30.com/' +
													json.hash + '-sl200'
											})
											_this.hashList.push(
												'http://static.dadi30.com/' + json.hash
												)

											setTimeout(function() {
												uni.hideLoading()
											}, 1000);

										}
									});
								})
								// console.log(_this.imageList)
							}
						})

					}
				})
			},
			addImageTest(){
				uni.chooseImage({
					count: 6, //最多运行上传几张图片
					success(res) {
						
						
					}
				})		
			}
		}
	}
</script>

<style lang="scss">
	.fabu {
		.feedback-title {
			margin: 15px;
			margin-bottom: 0;
			font-size: 14px;
			color: #666;
		}

		.feedback-content {
			margin: 15px;
			padding: 10px;
			box-sizing: border-box;
			border: 1px solid #eee;

			.feedback-textarea {
				font-size: 12px;
				width: 100%;
				height: 100px;
			}
		}

		.feedback-image-box {
			display: flex;
			flex-wrap: wrap;
			padding: 10px;

			.feedback-image-item {
				position: relative;
				width: 33.33%;
				height: 0;
				padding-top: 33.33%;
				box-sizing: border-box;

				.image-box {
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 5px;
					left: 5px;
					right: 5px;
					bottom: 5px;
					border: 1px solid #eee;
					border-radius: 5px;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.close-icon {
					position: absolute;
					right: 0;
					top: 0;
					width: 22px;
					height: 22px;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #ff5a5f;
					z-index: 2;
				}
			}
		}

		.feedback-button {
			margin: 0 15px;
			background-color: $mk-base-color;
		}
	}
</style>
